<template>
  <div class="home">
    <div id="___MAP" class="map-container" ref="map"></div>
    <ShopDialog :id="cid" @maskClick="()=>{this.cid = null}" />
  </div>
</template>

<script>
// test
import PointMarker from '@/assets/js/PointMarker.js'
import ShopDialog from './ShopDialog'
import mock from '@/assets/js/mock.js'

import Map from '@/assets/js/gdmap'
import env from '@/assets/env'
import util from '@/assets/js/utils'
import { mapGetters } from 'vuex'
let iMap = null
/* eslint-disable */
let MAP_TYPE = null // 地图进入样式
export default {
  name: 'home',
  components: { ShopDialog },
  computed: {
    ...mapGetters(['mapZoom'])
  },
  data() {
    return {
      cid: null
    }
  },
  mounted() {
    let query = util.getAllQueryString()
    MAP_TYPE = query.id || '1'

    iMap = new Map({
      id: this.$refs.map,
      center: env.CENTER,
      zoom: this.mapZoom,
      tileLayerUrl: env.tileLayerUrl,
      // tileLayerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      // tileLayerUrl: 'http://i.fengtengfei.cn/map/{z}/{x}_{y}.png',
      click: this.mapClick.bind(this)
    })

    iMap.getMap().on('zoomend', e => {
      console.log(iMap.getZoom())
      // alert(iMap.getZoom())
      this.updateMapState(e)
    })

    this.showPointList()
  },
  methods: {
    mapClick(e) {
      console.log(e.x + ', ' + e.y, e)
    },
    updateMapState(e) {
      // console.log(e)
      let zoom = iMap.getZoom()
      this.$store.commit('setMapZoom', zoom)
    },
    showPointList() {
      let pointList = mock.pointList
      for (let i = 0; i < pointList.length; i++) {
        const point = pointList[i]
        let marker = new PointMarker(iMap.getMap(), {
          position: [point.longitude, point.latitude],
          imageStyle: point.image,
          textStyle: point.textStyle,
          text: point.text,
          extData: point,
          click: this.markerClickHandle
        })
        marker.show()
      }
    },
    markerClickHandle(data) {
      // console.log(data)
      this.cid = data.id
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  .map-container {
    width: 100%;
    height: 100%;
  }
}
</style>
